import React, { useEffect} from 'react'
import style from '../css/test.module.css'    //将css命名为global.css，可以只作用于本js文件
import getCinemaList from '../actionCreator/getCinemaList';
import { connect } from 'react-redux';

function Cinemas(props) {
    let {city, list, getCinemaList} = props;
    useEffect(()=>{
        if(list.length === 0){    //使用store进行缓存
          getCinemaList();
        }
    },[list, getCinemaList])
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between'}}>
        <div onClick={()=>{
          props.history.push(`/city`)
          }}>{city}
        </div>
        <div onClick={()=>{
          props.history.push('/search')
        }}>
          搜索
        </div>
      </div>
      <div className={style.active}>
        {
          list.map(item =>
            <div key={item.cinemaId}>{item.name}</div>)

        }  
      </div>    {/* 在使用动态css时候，格式如前方代码*/}
    </div>
  )
}

const changeStateToProps = (state) =>{
  return {
    city :state.CityReducer.city,
    list : state.CinemaListReducer.list
  }
}

const changeDispatchToProps = {
  getCinemaList
}

export default connect(changeStateToProps, changeDispatchToProps)(Cinemas)